<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="Mosaddek">
  <meta name="keyword" content="FlatLab, Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">
  <link rel="icon" href="../../img/favicon.ico" type="image/x-icon" />
  <link rel="shortcut icon" href="../../img/favicon.ico" type="image/x-icon" />

  <title>差旅费报销审批单</title>

  <!-- Bootstrap core CSS -->
  <link href="../../css/bootstrap.min.css" rel="stylesheet">
  <link href="../../css/bootstrap-reset.css" rel="stylesheet">
  <!--external css-->
  <link href="../../assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
  <link href="../../assets/jquery-easy-pie-chart/jquery.easy-pie-chart.css" rel="stylesheet" type="text/css" media="screen"
  />
  <link rel="stylesheet" href="../../css/owl.carousel.css" type="text/css">

  <link rel="stylesheet" type="text/css" href="../../assets/bootstrap-datepicker/css/datepicker.css" />
  <link rel="stylesheet" type="text/css" href="../../assets/bootstrap-colorpicker/css/colorpicker.css" />
  <link rel="stylesheet" type="text/css" href="../../assets/bootstrap-daterangepicker/daterangepicker.css" />

  <!-- Custom styles for this template -->
  <link href="../../css/style.css" rel="stylesheet">
  <link href="../../css/style-responsive.css" rel="stylesheet" />

  <!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
  <!--[if lt IE 9]>
      <script src="../../js/html5shiv.js"></script>
      <script src="../../js/respond.min.js"></script>
    <![endif]-->

  <!-- 表格组件 -->
  <link rel="stylesheet" type="text/css" href="../../assets/table/dependents/fontAwesome/css/font-awesome.min.css" media="all"
  />
  <link rel="stylesheet" type="text/css" href="../../assets/table/dlshouwen.grid.css" />
  <link rel="stylesheet" type="text/css" href="../../assets/table/dependents/datePicker/skin/WdatePicker.css" />
  <link rel="stylesheet" type="text/css" href="../../assets/table/dependents/datePicker/skin/default/datepicker.css" />

  <!-- pagesilde组件 -->
  <link rel="stylesheet" type="text/css" href="../../assets/pageslide/jquery.pageslide.css" />

  <!-- 流程图绘制组件 -->
  <link rel="stylesheet" type="text/css" href="../../assets/joint/joint.css" />

  <!-- 当前页面CSS -->
  <link href="../../css/index.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <section class="wrapper" style="margin-top: 0;">
    <div class="row">
      <div class="col-lg-12">
        <section class="panel">
          <div class="panel-body">
            <div class="printbox">
              <div class="wrap-content containerPrint" id="containerPrint" style="width: 1000px;">
                <table style="font-size: 12px;color: #333;border-collapse:collapse;" cellspacing="0" cellpadding="0">
                  <thead>
                    <tr style="text-align: center;color: #333;">
                      <td style="font-size: 16px;" colspan="15">差旅费报销审批单（打印格式）</td>
                    </tr>
                    <tr style="text-align: right;">
                      <td colspan="15">
                        <span style="float: left;padding-right: 20px;">申请部门：运营管理部</span>
                        <span style="float: left;padding-right: 20px;">申请人：张三</span>
                        <span style="float: left;">日期：2018-01-02</span>
                        <span style="float: right;">单据编号：CLFBXD-NJ-201801021401</span>
                      </td>
                    </tr>
                  </thead>
                  <tbody style="border:1px solid #000;">
                    <tr style="border:1px solid #000;text-align: center;">
                      <td style="border:1px solid #000;"></td>
                      <td style="border:1px solid #000;" colspan="2">出差日期</td>
                      <td style="border:1px solid #000;" colspan="3">出差内容</td>
                      <td style="border:1px solid #000;" colspan="2">车票</td>
                      <td style="border:1px solid #000;" colspan="3">其他费用</td>
                      <td style="border:1px solid #000;"></td>
                      <td style="border:1px solid #000;" colspan="2">补助</td>
                      <td style="border:1px solid #000;"></td>
                    </tr>
                    <tr style="border:1px solid #000;text-align: center;">
                      <td style="border:1px solid #000;width:30px;">序号</td>
                      <td style="border:1px solid #000;width:105px;">起始时间</td>
                      <td style="border:1px solid #000;width:105px;">终止时间</td>
                      <td style="border:1px solid #000;width:70px;">地点</td>
                      <td style="border:1px solid #000;width:75px;">项目(客户)</td>
                      <td style="border:1px solid #000;width:65px;">事由</td>
                      <td style="border:1px solid #000;width:65px;">火车/汽车</td>
                      <td style="border:1px solid #000;width:65px;">飞机</td>
                      <td style="border:1px solid #000;width:65px;">交通费</td>
                      <td style="border:1px solid #000;width:65px;">招待费</td>
                      <td style="border:1px solid #000;width:65px;">其他</td>
                      <td style="border:1px solid #000;width:65px;">住宿费</td>
                      <td style="border:1px solid #000;width:65px;">出差天数</td>
                      <td style="border:1px solid #000;width:65px;">出差补助</td>
                      <td style="border:1px solid #000;width:65px;">小计</td>
                    </tr>
                    <tr style="border:1px solid #000;text-align: center;">
                      <td style="border:1px solid #000;">1</td>
                      <td style="border:1px solid #000;">2018/01/02 12:00</td>
                      <td style="border:1px solid #000;">2018/01/02 12:00</td>
                      <td style="border:1px solid #000;">马鞍山市</td>
                      <td style="border:1px solid #000;">项目A</td>
                      <td style="border:1px solid #000;">内部汇报</td>
                      <td style="border:1px solid #000;">99999.00</td>
                      <td style="border:1px solid #000;">99999.00</td>
                      <td style="border:1px solid #000;">99999.00</td>
                      <td style="border:1px solid #000;">99999.00</td>
                      <td style="border:1px solid #000;">99999.00</td>
                      <td style="border:1px solid #000;">99999.00</td>
                      <td style="border:1px solid #000;">2.5</td>
                      <td style="border:1px solid #000;">99999.00</td>
                      <td style="border:1px solid #000;">99999.00</td>
                    </tr>
                    <tr style="border:1px solid #000;text-align: center;">
                      <td style="border:1px solid #000;">2</td>
                      <td style="border:1px solid #000;">2018/01/02 12:00</td>
                      <td style="border:1px solid #000;">2018/01/05 12:00</td>
                      <td style="border:1px solid #000;">南京市</td>
                      <td style="border:1px solid #000;">项目B</td>
                      <td style="border:1px solid #000;">内部汇报</td>
                      <td style="border:1px solid #000;">99999.00</td>
                      <td style="border:1px solid #000;">99999.00</td>
                      <td style="border:1px solid #000;">99999.00</td>
                      <td style="border:1px solid #000;">99999.00</td>
                      <td style="border:1px solid #000;">99999.00</td>
                      <td style="border:1px solid #000;">99999.00</td>
                      <td style="border:1px solid #000;">2.5</td>
                      <td style="border:1px solid #000;">99999.00</td>
                      <td style="border:1px solid #000;">99999.00</td>
                    </tr>
                    <tr style="border:1px solid #000;text-align: center;">
                      <td style="border:1px solid #000;">3</td>
                      <td style="border:1px solid #000;">2018/01/02 12:00</td>
                      <td style="border:1px solid #000;">2018/01/05 12:00</td>
                      <td style="border:1px solid #000;">上海市</td>
                      <td style="border:1px solid #000;">项目C</td>
                      <td style="border:1px solid #000;">内部汇报</td>
                      <td style="border:1px solid #000;">99999.00</td>
                      <td style="border:1px solid #000;">99999.00</td>
                      <td style="border:1px solid #000;">99999.00</td>
                      <td style="border:1px solid #000;">99999.00</td>
                      <td style="border:1px solid #000;">99999.00</td>
                      <td style="border:1px solid #000;">99999.00</td>
                      <td style="border:1px solid #000;">2.5</td>
                      <td style="border:1px solid #000;">99999.00</td>
                      <td style="border:1px solid #000;">99999.00</td>
                    </tr>
                    <tr style="border:1px solid #000;text-align: center;">
                      <td style="border:1px solid #000;">4</td>
                      <td style="border:1px solid #000;">2018/01/02 12:00</td>
                      <td style="border:1px solid #000;">2018/01/05 12:00</td>
                      <td style="border:1px solid #000;">上海市</td>
                      <td style="border:1px solid #000;">项目C</td>
                      <td style="border:1px solid #000;">内部汇报</td>
                      <td style="border:1px solid #000;">99999.00</td>
                      <td style="border:1px solid #000;">99999.00</td>
                      <td style="border:1px solid #000;">99999.00</td>
                      <td style="border:1px solid #000;">99999.00</td>
                      <td style="border:1px solid #000;">99999.00</td>
                      <td style="border:1px solid #000;">99999.00</td>
                      <td style="border:1px solid #000;">2.5</td>
                      <td style="border:1px solid #000;">99999.00</td>
                      <td style="border:1px solid #000;">99999.00</td>
                    </tr>
                  </tbody>
                  <tfoot>
                    <tr>
                      <td style="text-align: left;" colspan="6">金额大写：壹贰叁肆伍陆柒捌玖拾佰仟万亿元角分零整</td>
                      <td style="text-align: right;" colspan="9">合计总金额：999999.00</td>
                    </tr>
                  </tfoot>
                </table>
                <p style="color: #333;font-size: 12px;">
                  备注:
                  <br/> 1.金额不得涂改(金额大写壹、贰、叁、肆、伍、陆、柒、捌、玖、拾、佰、仟、万、亿、元、角、分、零、整);
                  <br/> 2.特殊城市:北京、深圳、珠海、厦门、广州、汕头、上海、杭州、海南,其他为一般城市;
                  <br/> 3.出差补助说明:80元/天;
                  <br/> 3.入职和南京总部培训(享受30元/天餐费补贴,无须提供发票).
                  <span style="float: right;">领款人签字：__________________________________________________</span>
                </p>
                <table style="width: 100%;font-size:12px;color: #333;text-align: center;border-collapse:collapse;" cellspacing="0" cellpadding="0">
                  <thead style="text-align: center">
                    <tr style="text-align: center">
                      <th style="width: 4%;text-align: center">序号</th>
                      <th style="width: 16%;text-align: center">节点名称</th>
                      <th style="width: 16%;text-align: center">电子签名</th>
                      <th style="width: 16%;text-align: center">签名日期</th>
                      <th style="width: 6%;text-align: center">操作</th>
                      <th style="width: 26%;text-align: center">留言</th>
                    </tr>
                  </thead>
                  <tbody style="text-align: center">
                    <tr>
                      <td>1</td>
                      <td>
                        <span style="display:inline-block; text-decoration: underline">申请人录入</span>
                      </td>
                      <td>
                        <span style="display:inline-block; text-decoration: underline">张三</span>
                        <br/>
                        <span style="display:inline-block; text-decoration: underline">运营管理部</span>
                      </td>
                      <td>
                        <span style="display:inline-block; text-decoration: underline">2018-04-06 11:30:22</span>
                      </td>
                      <td>
                        <span style="display:inline-block; text-decoration: underline">提交</span>
                      </td>
                      <td>
                        <span style="display:inline-block; text-decoration: underline">出差报销流程已提交，请领导审批！</span>
                      </td>
                    </tr>
                    <tr>
                      <td>2</td>
                      <td>
                        <span style="display:inline-block; text-decoration: underline">公司领导审核</span>
                      </td>
                      <td>
                        <span style="display:inline-block; text-decoration: underline">李四</span>
                        <br/>
                        <span style="display:inline-block; text-decoration: underline">产品管理部</span>
                      </td>
                      <td>
                        <span style="display:inline-block; text-decoration: underline">2018-04-06 11:30:22</span>
                      </td>
                      <td>
                        <span style="display:inline-block; text-decoration: underline">同意</span>
                      </td>
                      <td>
                        <span style="display:inline-block; text-decoration: underline"></span>
                      </td>
                    </tr>
                    <tr>
                      <td>3</td>
                      <td>
                        <span style="display:inline-block; text-decoration: underline">财务会计审核</span>
                      </td>
                      <td>
                        <span style="display:inline-block; text-decoration: underline">王五</span>
                        <br/>
                        <span style="display:inline-block; text-decoration: underline">财务部</span>
                      </td>
                      <td>
                        <span style="display:inline-block; text-decoration: underline">2018-04-06 11:30:22</span>
                      </td>
                      <td>
                        <span style="display:inline-block; text-decoration: underline">同意</span>
                      </td>
                      <td>
                        <span style="display:inline-block; text-decoration: underline">同意</span>
                      </td>
                    </tr>
                    <tr>
                      <td>4</td>
                      <td>
                        <span style="display:inline-block; text-decoration: underline">财务主管审核</span>
                      </td>
                      <td>
                        <span style="display:inline-block; text-decoration: underline">陈六</span>
                        <br/>
                        <span style="display:inline-block; text-decoration: underline">财务部</span>
                      </td>
                      <td>
                        <span style="display:inline-block; text-decoration: underline">2018-04-06 11:30:22</span>
                      </td>
                      <td>
                        <span style="display:inline-block; text-decoration: underline">同意</span>
                      </td>
                      <td>
                        <span style="display:inline-block; text-decoration: underline"></span>
                      </td>
                    </tr>
                    <tr>
                      <td>5</td>
                      <td>
                        <span style="display:inline-block; text-decoration: underline">区域分管副总审批</span>
                      </td>
                      <td>
                        <span style="display:inline-block; text-decoration: underline">赵七</span>
                        <br/>
                        <span style="display:inline-block; text-decoration: underline">总经办</span>
                      </td>
                      <td>
                        <span style="display:inline-block; text-decoration: underline">2018-04-06 11:30:22</span>
                      </td>
                      <td>
                        <span style="display:inline-block; text-decoration: underline">同意</span>
                      </td>
                      <td>
                        <span style="display:inline-block; text-decoration: underline"></span>
                      </td>
                    </tr>
                    <tr>
                      <td>6</td>
                      <td>
                        <span style="display:inline-block; text-decoration: underline">申请人打印单据</span>
                      </td>
                      <td>
                        <span style="display:inline-block; text-decoration: underline">钱八</span>
                        <br/>
                        <span style="display:inline-block; text-decoration: underline">运营管理部</span>
                      </td>
                      <td>
                        <span style="display:inline-block; text-decoration: underline">2018-04-06 11:30:22</span>
                      </td>
                      <td>
                        <span style="display:inline-block; text-decoration: underline">已打印提交</span>
                      </td>
                      <td>
                        <span style="display:inline-block; text-decoration: underline"></span>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </section>
        <section class="panel">
          <div class="panel-body">
            <p class="default-buttons">
              <a href="javascript:void(0);" class="button-back btn btn-info" onclick="window.history.back()">
                <i class="icon-reply"></i> 返回</a>
              <a href="javascript:void(0);" class="button-next  btn btn-success" onclick="printpage()">
                <i class="icon-print"></i> 打印单据</a>
            </p>
          </div>
        </section>
        <!-- 打印图片生成 -->
        <section class="panel printImg" style="display: none;">
          <header class="panel-heading">本地图片</header>
          <div class="panel-body" id="printImgBox"></div>
        </section>

        <!-- 流程图 -->
        <section class="hdaper">
          <div class="panel">
            <header class="panel-heading">
              差旅费报销流程示意图
            </header>
            <div class="panel-body">
              <div id="paper" class="paper"></div>
            </div>
          </div>
          <div class="paper-bg"></div>
        </section>
        <!-- 流程跟踪 -->
        <section>
          <a href="#modal" class="second" id="process" onclick="shaper();">
            流程跟踪
          </a>
          <section id="modal" style="display:none">
            <div class="proce-head">
              <!-- <div class="pro-tlf-box">
                <div class="pro"></div>
              </div> -->
              <div class="pro-tlf-box">
                <a href="javascript:void(0);" class="button-back btn btn-info" onclick="pDowload();"><i class="icon-cloud-download"></i> 查看报销管理制度说明文件</a>
              </div>
              <div class="pro-trg-box">
                <a class="proce-btn-close" href="javascript:$.pageslide.close()" onclick="hdaper();">关闭</a>
              </div>
            </div>

            <ul class="proce-content">
              <li>
                <label>流程标题：</label>
                <span>张三提交的差旅费报销申请流程</span>
              </li>
              <li>
                <label>创建来源：</label>
                <span>赛特斯信息科技股份有限公司/副总经理-李四/运营管理部/张三</span>
              </li>
              <li>
                <label>创建日期：</label>
                <span>2010-01-02 11:09:11</span>
              </li>
              <li>
                <label>流程跟踪：</label>
              </li>
            </ul>
            <div class="proce-middle">
              <div class="proce-log">
                <div class="proce-log-lf">
                  <!-- 虚线 -->
                  <div class="log-dashed"></div>
                </div>
                <div class="proce-log-rg">
                  <!-- 节点 -->
                  <div class="log-mark">
                    <!-- 标记点 -->
                    <div class="log-mark-icon mark-prime">
                      发起
                    </div>
                    <!-- 对话框箭头 -->
                    <div class="log-tag"></div>
                    <!-- 节点内容 -->
                    <div class="log-mark-value">
                      <div class="log-mtitle">
                        <span class="log-time">2018-01-02 18:22:22</span>
                        <span class="log-status">状态：任务执行完毕
                          <i></i>
                        </span>
                      </div>
                      <div class="log-mbody">
                        <span class="log-name">办理人：张杨果儿(分管副总及高级总监)</span>
                        <span class="log-more" onclick="shlog()">查看数据</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="proce-log">
                <div class="proce-log-lf">
                  <!-- 虚线 -->
                  <div class="log-dashed"></div>
                </div>
                <div class="proce-log-rg">
                  <!-- 节点 -->
                  <div class="log-mark">
                    <!-- 标记点 -->
                    <div class="log-mark-icon mark-warning">
                      回退
                    </div>
                    <!-- 对话框箭头 -->
                    <div class="log-tag"></div>
                    <!-- 节点内容 -->
                    <div class="log-mark-value">
                      <div class="log-mtitle">
                        <span class="log-time">2018-01-02 18:22:22</span>
                        <span class="log-status">状态：任务执行中
                          <i class="status-blue"></i>
                        </span>
                      </div>
                      <div class="log-mbody">
                        <span class="log-name">办理人：张三(总经理)</span>
                        <span class="log-more" onclick="shlog()">查看数据</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="proce-log">
                <div class="proce-log-lf">
                  <!-- 虚线 -->
                  <div class="log-dashed"></div>
                </div>
                <div class="proce-log-rg">
                  <!-- 节点 -->
                  <div class="log-mark">
                    <!-- 标记点 -->
                    <div class="log-mark-icon mark-success">
                      同意
                    </div>
                    <!-- 对话框箭头 -->
                    <div class="log-tag"></div>
                    <!-- 节点内容 -->
                    <div class="log-mark-value">
                      <div class="log-mtitle">
                        <span class="log-time">2018-01-02 18:22:22</span>
                        <span class="log-status">状态：任务等待中
                          <i class="status-yellow"></i>
                        </span>
                      </div>
                      <div class="log-mbody">
                        <span class="log-name">办理人：李四(财务会计)</span>
                        <span class="log-more" onclick="shlog()">查看数据</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="proce-log">
                <div class="proce-log-lf">
                  <!-- 虚线 -->
                  <div class="log-dashed"></div>
                </div>
                <div class="proce-log-rg">
                  <!-- 节点 -->
                  <div class="log-mark">
                    <!-- 标记点 -->
                    <div class="log-mark-icon mark-blue">
                      办理
                    </div>
                    <!-- 对话框箭头 -->
                    <div class="log-tag"></div>
                    <!-- 节点内容 -->
                    <div class="log-mark-value">
                      <div class="log-mtitle">
                        <span class="log-time">2018-01-02 18:22:22</span>
                        <span class="log-status">状态：子流程执行中
                          <i class="status-purple"></i>
                        </span>
                      </div>
                      <div class="log-mbody">
                        <span class="log-name">办理人：王五(财务主管)</span>
                        <span class="log-more" onclick="shlog()">查看数据</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="proce-log">
                <div class="proce-log-lf">
                  <!-- 虚线 -->
                  <div class="log-dashed"></div>
                </div>
                <div class="proce-log-rg">
                  <!-- 节点 -->
                  <div class="log-mark">
                    <!-- 标记点 -->
                    <div class="log-mark-icon mark-danger">
                      拒绝
                    </div>
                    <!-- 对话框箭头 -->
                    <div class="log-tag"></div>
                    <!-- 节点内容 -->
                    <div class="log-mark-value">
                      <div class="log-mtitle">
                        <span class="log-time">2018-01-02 18:22:22</span>
                        <span class="log-status">状态：子流程执行中
                          <i class="status-purple"></i>
                        </span>
                      </div>
                      <div class="log-mbody">
                        <span class="log-name">办理人：王五(财务主管)</span>
                        <span class="log-more" onclick="shlog()">查看数据</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="proce-log">
                <div class="proce-log-lf">
                  <!-- 虚线 -->
                  <div class="log-dashed"></div>
                </div>
                <div class="proce-log-rg">
                  <!-- 节点 -->
                  <div class="log-mark">
                    <!-- 标记点 -->
                    <div class="log-mark-icon">
                      结束
                    </div>
                    <!-- 对话框箭头 -->
                    <div class="log-tag"></div>
                    <!-- 节点内容 -->
                    <div class="log-mark-value">
                      <div class="log-mtitle">
                        <span class="log-time">2018-01-02 18:22:22</span>
                        <span class="log-status">状态：子流程结束
                          <i class="status-red"></i>
                        </span>
                      </div>
                      <div class="log-mbody">
                        <span class="log-name">办理人：陈六(区域分管副总)</span>
                        <span class="log-more" onclick="shlog()">查看数据</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

            </div>
          </section>
        </section>
      </div>
    </div>
  </section>
  <!-- js placed at the end of the document so the pages load faster -->
  <script src="../../js/jquery.js"></script>
  <script src="../../js/jquery-1.8.3.min.js"></script>
  <script src="../../js/bootstrap.min.js"></script>
  <script src="../../js/jquery.scrollTo.min.js"></script>
  <script src="../../js/jquery.nicescroll.js" type="text/javascript"></script>
  <script src="../../js/jquery.sparkline.js" type="text/javascript"></script>
  <script src="../../assets/jquery-easy-pie-chart/jquery.easy-pie-chart.js"></script>
  <script src="../../js/owl.carousel.js"></script>
  <script src="../../js/jquery.customSelect.min.js"></script>

  <script type="text/javascript" src="../../assets/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
  <script type="text/javascript" src="../../assets/bootstrap-daterangepicker/date.js"></script>
  <script type="text/javascript" src="../../assets/bootstrap-daterangepicker/daterangepicker.js"></script>

  <!--common script for all pages-->
  <script src="../../js/common-scripts.js"></script>

  <!--script for this page-->
  <script src="../../js/sparkline-chart.js"></script>
  <script src="../../js/easy-pie-chart.js"></script>

  <!-- 外部公共js文件引入 -->
  <script src="../../js/layout.js"></script>
  <!-- layer组件 -->
  <script src="../../assets/layer/layer.js"></script>
  <!-- 表格组件 -->
  <script type="text/javascript" src="../../assets/table/dlshouwen.grid.js"></script>
  <script type="text/javascript" src="../../assets/table/i18n/zh-cn.js"></script>
  <script type="text/javascript" src="../../assets/table/dependents/datePicker/WdatePicker.js" defer="defer"></script>

  <!-- pageslide -->
  <script type="text/javascript" src="../../assets/pageslide/jquery.pageslide.min.js"></script>

  <!-- parint -->
  <script type="text/javascript" src="../../assets/print/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="../../assets/print/html2canvas.min.js"></script>
  <script type="text/javascript" src="../../assets/print/jquery.jqprint-0.3.js"></script>

  <!-- 进度条组件 -->
  <!-- <script type="text/javascript" src="../../assets/probar/progress.js"></script> -->

  <!-- 流程图绘制组件 -->
  <script type="text/javascript" src="../../assets/joint/lodash.min.js"></script>
  <script type="text/javascript" src="../../assets/joint/backbone-min.js"></script>
  <script type="text/javascript" src="../../assets/joint/joint.min.js"></script>

  <!-- 当前页面js文件引入 -->
  <script src="../../js/do/cost.js"></script>

  <script>
    //流程图绘制
    function tgraph() {
      var graph = new joint.dia.Graph();

      var ElementView = joint.dia.ElementView.extend({
        pointerdown: function () {
          this._click = true;
          joint.dia.ElementView.prototype.pointerdown.apply(this, arguments);
        },
        pointermove: function (evt, x, y) {
          this._click = false;
          joint.dia.ElementView.prototype.pointermove.apply(this, arguments);
        },
        pointerup: function (evt, x, y) {
          if (this._click) {
            // triggers an event on the paper and the element itself
            this.notify('cell:click', evt, x, y);
          } else {
            joint.dia.ElementView.prototype.pointerup.apply(this, arguments);
          }
        }
      });
      var LinkView = joint.dia.LinkView.extend({
        addVertex: function (evt, x, y) {},
        removeVertex: function (endType) {},
        pointerdown: function (evt, x, y) {}
      });

      //定义画布
      var paper = new joint.dia.Paper({
        el: $('#paper'),
        width: 535,
        height: 465,
        gridSize: 1,
        model: graph,
        elementView: ElementView,
        linkView: LinkView
      });

      //paper.$el.css('pointer-events', 'none')//去除默认样式，使所有事件不可用

      //定义形状
      var state = function (x, y, shape, background, text) {
        var cell;
        if (shape === "rect") {
          cell = new joint.shapes.basic.Rect({
            position: {
              x: x,
              y: y
            }, //坐标
            size: {
              width: 80,
              height: 80
            }, //宽高
            attrs: {
              rect: {
                fill: {
                  type: 'linearGradient',
                  stops: [{
                      offset: '0%',
                      color: background
                    }, //渐变开始
                    {
                      offset: '100%',
                      color: background
                    } //渐变结束
                  ],
                  attrs: {
                    x1: '0%',
                    y1: '0%',
                    x2: '0%',
                    y2: '100%'
                  }
                },
                stroke: '#e0e0e0', //边框颜色
                'stroke-width': 5 //边框大小
              },
              text: {
                'font-weight': 100,
                'font-size': 12,
                fill: '#ede7cf',
                text: text,
              } //显示文字
            }
          });
        } else if (shape === "ellipse") {
          cell = new joint.shapes.basic.Ellipse({
            position: {
              x: x,
              y: y
            }, //坐标
            size: {
              width: 80,
              height: 80
            }, //宽高
            attrs: {
              ellipse: {
                fill: {
                  type: 'linearGradient',
                  stops: [{
                      offset: '0%',
                      color: background
                    }, //渐变开始
                    {
                      offset: '100%',
                      color: background
                    } //渐变结束
                  ],
                  attrs: {
                    x1: '0%',
                    y1: '0%',
                    x2: '0%',
                    y2: '100%'
                  }
                },
                stroke: '#e0e0e0', //边框颜色
                'stroke-width': 5 //边框大小
              },
              text: {
                'font-weight': 100,
                'font-size': 12,
                fill: '#ede7cf',
                text: text
              } //显示文字
            }
          });
        }
        graph.addCell(cell);
        return cell;
      };

      //定义连线
      function link(source, target, label) {
        var cell = new joint.dia.Link({
          source: {
            id: source.id
          },
          target: {
            id: target.id
          },
          labels: [{
            position: 0.5,
            attrs: {
              text: {
                text: label || '',
                'font-size': 12,
                'font-weight': 'bold'
              }
            }
          }],
          router: {
            name: 'manhattan'
          }, //设置连线弯曲样式 manhattan直角

          toolMarkup: '<g></g>', // 去掉tool，包括红色x
          arrowheadMarkup: "<g></g>", //去掉两头的箭头

          attrs: {
            '.connection': {
              stroke: '#999', //连线颜色
              'stroke-width': 2 //连线粗细
            },
            '.marker-target': {
              fill: '#999', //箭头颜色
              'stroke-width': 0, //边框大小
              d: 'M 10 0 L 0 5 L 10 10 z' //箭头样式
            }
          }
        });
        graph.addCell(cell);
        return cell;
      }

      //创建元素
      var start = state(20, 30, "ellipse", "#4f6d7d", "录入报销信息");
      var state1 = state(160, 30, "ellipse", "#4f6d7d", joint.util.breakText("关联项目负责人审批", {
        width: 70
      }));

      var state2 = state(300, 30, "ellipse", "#4f6d7d", "总监审批");
      var state3 = state(440, 30, "ellipse", "#4f6d7d", joint.util.breakText("分管副总(含高级总监)审批", {
        width: 70
      }));
      var state4 = state(440, 190, "ellipse", "#4f6d7d", "财务审核");
      var state5 = state(300, 190, "ellipse", "#4f6d7d", "区总经理核准");
      var state6 = state(160, 190, "ellipse", "#4f6d7d", "总经理核准");
      var state7 = state(20, 190, "ellipse", "#4f6d7d", "打印报销单据");
      var state8 = state(20, 350, "ellipse", "#4f6d7d", "出纳付款");
      var state9 = state(160, 350, "ellipse", "#4f6d7d", joint.util.breakText("付款成功(消息通知)", {
        width: 70
      }));
      var state10 = state(300, 350, "ellipse", "#4f6d7d", "结束");

      //创建连线
      link(start, state1, "");
      link(state1, state2, "");
      link(state2, state3, "");
      link(state3, state4, "");
      link(state4, state5, "");
      link(state5, state6, "");
      link(state6, state7, "");
      link(state7, state8, "");
      link(state8, state9, "");
      link(state9, state10, "");

      //给所有元素添加点击事件
      paper.on('cell:click', function (e) {
        shlog();
      });
    };
    tgraph();
  </script>

  <!-- 流程跟踪js文件引入 -->
  <script src="../../js/do/aper.js"></script>

</body>

</html>